<template>
  <div class="risk app-container">
    <div class="material-top">
      <div class="material-title"><span :class="{ change: active }" @click="handelChange(1)">用户详情</span> <span :class="{ change: !active }" @click="handelChange(2)">登录日志</span></div>
      <el-button type="primary" color="#fff" @click="goBack" :dark="isDark" :icon="ArrowLeft">返回</el-button>
    </div>
    <div>
      <el-container>
        <el-aside width="200px">
          <div>
            <el-icon><User /></el-icon>
          </div>
          <div>1800000</div>
          <div>信用等级</div>
          <div>信用分：90</div>
        </el-aside>
        <el-main>
          <table cellspacing="0">
            <tr>
              <td class="tr-left">用户ID</td>
              <td class="tr-right">844746686</td>
              <td class="tr-left">注册时间</td>
              <td class="tr-right">2023-01-01 14:04:25</td>
            </tr>
            <tr>
              <td class="tr-left">姓名</td>
              <td class="tr-right">小熊</td>
              <td class="tr-left">身份证号</td>
              <td class="tr-right">511888888888888</td>
            </tr>
            <tr>
              <td class="tr-left">性别</td>
              <td class="tr-right">男</td>
              <td class="tr-left">教育程度</td>
              <td class="tr-right">本科</td>
            </tr>
            <tr>
              <td class="tr-left">年龄</td>
              <td class="tr-right">35</td>
              <td class="tr-left">生日</td>
              <td class="tr-right">1990年6月22日</td>
            </tr>
            <tr>
              <td class="tr-left">籍贯</td>
              <td class="tr-right">湖北武汉</td>
              <td class="tr-left">现居住地址</td>
              <td class="tr-right">深圳市宝安区</td>
            </tr>
            <tr>
              <td class="tr-left">个人年收入</td>
              <td class="tr-right">30万</td>
              <td class="tr-left">用户来源</td>
              <td class="tr-right">微信</td>
            </tr>
          </table>
        </el-main>
      </el-container>
    </div>
    <el-row>
      <el-col :span="8" :offset="8">
        <el-button type="info" @click="goNext">查看完整档案>></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="23"
        ><el-icon class="colIcon" size="18"><List /></el-icon> 担保信息</el-col
      >
    </el-row>
    <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
      <el-table-column label="通话号码" align="center" prop="jobId" />
      <el-table-column label="通话地点" align="center" prop="jobName" :show-overflow-tooltip="true" />
      <el-table-column label="呼叫类型" align="center" prop="jobGroup">
        <template #default>
          <!-- <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" /> -->
        </template>
      </el-table-column>
      <el-table-column label="通话时间" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
      <el-table-column label="通话时长" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
      <el-table-column label="还款方式" align="center" prop="status" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column label="通话类型" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
      <el-table-column label="套餐" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
    </el-table>
    <el-row>
      <el-col :span="23"
        ><el-icon class="colIcon" size="18"><List /></el-icon> 银行卡信息</el-col
      >
    </el-row>
    <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
      <el-table-column label="账户类型" align="center" prop="jobId" />
      <el-table-column label="账户户名" align="center" prop="jobName" :show-overflow-tooltip="true" />
      <el-table-column label="银行开户行" align="center" prop="jobGroup">
        <template #default>
          <!-- <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" /> -->
        </template>
      </el-table-column>
      <el-table-column label="银行开户地" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
      <el-table-column label="支行名称" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
      <el-table-column label="银行账号" align="center" prop="status" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column label="确认银行账号" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
      <el-table-column label="使用状态" align="center" prop="cronExpression" :show-overflow-tooltip="true">
        <template #default>
          <el-switch v-model="value1" />
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="23"
        ><el-icon class="colIcon" size="18"><List /></el-icon> 还款记录</el-col
      >
    </el-row>
    <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
      <el-table-column label="担保编号" align="center" prop="jobId" />
      <el-table-column label="申请日期" align="center" prop="jobName" :show-overflow-tooltip="true" />
      <el-table-column label="用户账号" align="center" prop="jobGroup">
        <template #default>
          <!-- <dict-tag :options="sys_job_group" :value="scope.row.jobGroup" /> -->
        </template>
      </el-table-column>
      <el-table-column label="申请额度" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
      <el-table-column label="担保产品" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
      <el-table-column label="期限" align="center" prop="status" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column label="审批金额" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
      <el-table-column label="担保来源" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
      <el-table-column label="担保状态" align="center" prop="cronExpression" :show-overflow-tooltip="true">
        <template #default>
          <el-switch v-model="value1" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="page_count" v-model:limit="page_size" />
    <particulars></particulars>
  </div>
</template>
<script setup>
import { ArrowLeft } from "@element-plus/icons-vue";
import router from "@/router";
import particulars from "./particulars.vue";
import { ref } from "vue";
const isDark = ref(null);
const active = ref(true);
const jobList = ref([]);
const loading = ref(false);
const value1 = ref(true);
const labelPosition = ref("right");
const total = ref(0);
const page_count = ref(1);
const page_size = ref(10);
const route = useRoute();
const formLabelAlign = reactive({
  name: "",
  region: "",
  type: "",
});

/** 返回 */
function goBack() {
  router.go(-1);
}
function handelChange(id) {
  if (id == 1) {
    active.value = true;
  } else {
    active.value = false;
  }
}
/*点击跳转**/
function goNext() {
  router.push('archives')
}
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.jobId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
</script>
<style lang="scss" scoped>
.material-title {
  font-size: 15px;
  font-weight: bold;
  span {
    display: inline-block;
    border: 1px solid #e4e4e4;
    padding: 5px;
    cursor: pointer;
  }
}
.change {
  background: #333;
  color: #fff;
}
.material-top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
}
:deep(.el-aside) {
  text-align: left;
  background: #f9fafc;
  padding-left: 60px;
  border-radius: 0px;
  border: 1px solid #e4e4e4;
  margin: 0;
  div {
    &:first-child {
      width: 60px;
      height: 60px;
      border-radius: 30px;
      text-align: center;
      line-height: 60px;
      background: #ebebeb;
      color: #fff;
      font-size: 32px;
    }
  }
}
:deep(.el-container) {
  padding-top: 5px;
  margin-bottom: 20px;
}
:deep(.el-main) {
  padding: 0;
  font-size: 16px;
}
.tr-left {
  width: 125px;
  text-align: right;
  padding-right: 10px;
  background: #f9fafc;
}
.tr-right {
  padding-left: 10px;
  width: 260px;
}
table {
  border-top: 1px solid #e4e4e4;
  height: 100%;
}
td {
  border-bottom: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
.colIcon {
  vertical-align: text-bottom;
}
</style>
